<template>
  <view class="reviews-tags">
    <scroll-view scroll-x class="tags-scroll-view" show-scrollbar="false">
      <view class="tags-container">
        <view 
          v-for="(tag, index) in tags" 
          :key="index"
          class="reviews-tag"
          :class="{ 'active': tag.active }"
          @click="handleTagClick(index)"
        >
          {{ tag.name }}({{ tag.count }})
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  tags: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['tag-selected']);

const handleTagClick = (index) => {
  emit('tag-selected', index);
};
</script>

<style lang="scss" scoped>
.reviews-tags {
  position: relative;
}

.tags-scroll-view {
  white-space: nowrap;
  width: 100%;
}

.tags-container {
  display: inline-flex;
  padding-bottom: 4px;
}

.reviews-tag {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f5f5f5;
  border-radius: 20px;
  margin-right: 8px;
  font-size: 13px;
  color: #666;
  transition: all 0.2s ease;
  
  &.active {
    background-color: #e8f7ee;
    color: #07c160;
    font-weight: 500;
    transform: scale(1.02);
  }
  
  &:last-child {
    margin-right: 0;
  }
  
  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}
</style>
